<template lang="html">
  <el-dialog width="600px" :close-on-click-modal="closeonclickmodal" :title="getdialogTitle()" @open="listenopen()"
             @close="close"
             :visible="dialogshow">
    <div style="text-align: center">
      <el-transfer style="text-align: left; display: inline-block"
                   filterable
                   :titles="titles"
                   v-model="ownPerm"
                   :button-texts="button_texts"
                   :data="outPerm">
        <!--<el-button class="transfer-footer" slot="left-footer" size="mini">操作</el-button>-->
      </el-transfer>
    </div>
    <div style="margin-top:20px"></div>
    <el-row style="text-align: right">
      <el-button size="mini" @click="dialogshow = false">取 消</el-button>
      <el-button size="mini" type="primary" @click="toaddPerm('dialoginfo')">保 存</el-button>
    </el-row>
    <div style="margin-top:20px"></div>
  </el-dialog>
</template>
<script>
  import {Message} from "element-ui"
  export default {
    inject: ["reload"],
    data() {
      return {
        titles: ['系统角色', '已有角色'],
        outPerm: [],
        ownPerm: [1],
        button_texts: ['', ''],
        isajax: false,
        closeonclickmodal: true,
        formLabelWidth: '80px'
      }
    },
    props: ['dialogshow', 'dialoginfo', 'dialogurl'],
    methods: {
      generateData(data, type) {
        const target = [];
        if (type == 1) {
          for (var i = 0; i < data.length; i++) {
            target.push({
              key: data[i].id,
              label: data[i].name,
              disabled: false
            });
          }
        } else {
          for (var i = 0; i < data.length; i++) {
            target.push(data[i].id);
          }
        }
        return target;
      },
      init() {
        this.isajax = true;
        this.proAPI.getAllJson([
          this.proAPI.getJson(this.proAPI.URLS.getRolesByUserIdNotHave, {userId: this.dialoginfo.id}),
          this.proAPI.getJson(this.proAPI.URLS.getUserRolesByUserId, {userId: this.dialoginfo.id})
        ]).then((res) => {
          if (res[0] != null && res[1] != null) {
            this.outPerm = this.generateData(res[0].data, 1).concat(this.generateData(res[1].data, 1));
            this.ownPerm = this.generateData(res[1].data, 0);
          } else {
          }
          this.isajax = false;
        })
      },
      getdialogTitle() {
        return "编辑【" + this.dialoginfo.userName + "】账号的角色";
      },
      listenopen() {
        // console.log("弹窗打开了");

        if (this.$refs['dialoginfo'] != null) {
          this.$refs['dialoginfo'].resetFields();
        }
        // console.log(this.dialogshow);
      },
      close() {
        this.$emit('changedialogshow');
      },
      toaddPerm() {
        this.$confirm('确定修改该账号角色吗?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          callback: action => {
            // console.log(action);
            if(action=="confirm"){
              this.isajax = true;
              this.proAPI.postJson(this.proAPI.URLS.modifyUserRolesByUserId,{userId:this.dialoginfo.id,roleList:this.ownPerm}).then((res) => {
                if (res != null) {
                  // console.log(res);
                  Message.success({
                    "message": res.message
                  })
                  setTimeout(() => {
                    this.reload();
                  }, 1000)
                } else {
                  // console.log(1233333);
                }
                this.isajax = false;
              });
            }
          }
        });
      }
    },
    updated() {
      // console.log(88888);
    },
    mounted() {
      this.init();
      // console.log("开始创建！！！！！！！！");
    }
  };
</script>
<style lang="css">
  .el-dialog__body {
    padding: 10px 20px 1px 20px;
    color: #606266;
    font-size: 14px;
  }

  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
</style>
